#{extends 'main.html' /} #{set title:'P&aacute;gina Principal' /}
<script>
	$(document).ready(function() {
		$("#navigation li.dashboard a").addClass("active");
	});
</script>


<!-- start icon dock-->
<div id="icondock" class="grid_12">

	<ul>

		<li><a title="Check Your E-Mails"
			href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/remote.html"
			rel="facebox"><img src="/public/images/email.png" alt="Mail"><br>Mail<span>4</span></a></li>
		<li><a title="View Your Contact List" href="#" rel="tipsy"><img
				src="/public/images/book_addresses.png" alt="Contacts"><br>Contacts</a></li>
		<li><a title="View Recent Sales Activity" href="#" rel="tipsy"><img
				src="/public/images/coins.png" alt="Sales"><br>Sales<span>8</span></a></li>
		<li><a title="Analyse Site Activity" href="#" rel="tipsy"><img
				src="/public/images/chart_bar.png" alt="Stats"><br>Statistics</a></li>
		<li><a title="View Recent Commenets" href="#" rel="tipsy"><img
				src="/public/images/comment.png" alt="Comments"><br>
				Comments<span>7</span></a></li>
		<li><a title="Visualizar todos os usuários cadastrados."
			href="#" rel="tipsy"><img src="/public/images/user.png"
				alt="Users"><br>Usuários<span>${totalUsuarios}</span></a></li>
		<li><a title="Check Your Events" href="#" rel="tipsy"><img
				src="/public/images/date.png" alt="Events"><br>Events<span>1</span></a></li>
		<li><a title="Manage Incoming Orders" href="#" rel="tipsy"><img
				src="/public/images/basket.png" alt="Orders"><br>Orders</a></li>
		<li><a title="Set Reminders" href="#" rel="tipsy"><img
				src="/public/images/bell.png" alt="Reminders"><br>Reminders</a></li>

	</ul>


</div>
<!-- end icon dock-->

<div class="clearfix">&nbsp;</div>

<div class="container_12">

	<div id="notices" class="grid_4">

		<h2>Notices</h2>

		<ul>

			<li><a href="#" class="notice-icon1">Johnathan Smith replied
					to a Comment of yours.</a></li>
			<li><a href="#" class="notice-icon2">Samantha English added
					a Task for you.</a></li>
			<li><a href="#" class="notice-icon3">Peter Gillingham
					created an Event.</a></li>
			<li><a href="#" class="notice-icon4">Susanna Longstanton
					addded a News article.</a></li>
			<li><a href="#" class="notice-icon5">John Doe made a Sale.</a></li>
			<li><a href="#" class="notice-icon6">Karen Penchalleto sent
					you a reminder.</a></li>
			<li><a href="#" class="notice-icon7">Peter Kingston raised a
					support ticket.</a></li>


		</ul>

	</div>

	<!--  PLACEHOLDER FOR FLOT - REMOVE IF NOT REQUIRED -->
	<div class="grid_8">

		<h2>Visitor Stats</h2>

		<div style="position: relative;" id="placeholder">
			<canvas height="200" width="620"></canvas>
			<canvas style="position: absolute; left: 0px; top: 0px;" height="200"
				width="620"></canvas>
			<div class="tickLabels"
				style="font-size: smaller; color: rgb(84, 84, 84);">
				<div
					style="position: absolute; top: 188px; left: 49px; width: 103.333px; text-align: center;"
					class="tickLabel">Nov 8</div>
				<div
					style="position: absolute; top: 188px; left: 144px; width: 103.333px; text-align: center;"
					class="tickLabel">Nov 16</div>
				<div
					style="position: absolute; top: 188px; left: 228px; width: 103.333px; text-align: center;"
					class="tickLabel">Nov 23</div>
				<div
					style="position: absolute; top: 188px; left: 323px; width: 103.333px; text-align: center;"
					class="tickLabel">Dec 1</div>
				<div
					style="position: absolute; top: 188px; left: 407px; width: 103.333px; text-align: center;"
					class="tickLabel">Dec 8</div>
				<div
					style="position: absolute; top: 188px; left: 502px; width: 103.333px; text-align: center;"
					class="tickLabel">Dec 16</div>
				<div
					style="position: absolute; top: 171px; right: 599px; width: 21px; text-align: right;"
					class="tickLabel">0</div>
				<div
					style="position: absolute; top: 129px; right: 599px; width: 21px; text-align: right;"
					class="tickLabel">500</div>
				<div
					style="position: absolute; top: 87px; right: 599px; width: 21px; text-align: right;"
					class="tickLabel">1000</div>
				<div
					style="position: absolute; top: 44px; right: 599px; width: 21px; text-align: right;"
					class="tickLabel">1500</div>
				<div
					style="position: absolute; top: 2px; right: 599px; width: 21px; text-align: right;"
					class="tickLabel">2000</div>
			</div>
		</div>

	</div>

</div>

<div class="clearfix">&nbsp;</div>

<div class="container_12">

	<h2>Tabbed Content Example</h2>
	<ul class="tabs">
		<li class="active"><a href="#tab1">Gallery</a></li>
		<li><a href="#tab2">Form Elements</a></li>
	</ul>

	<div class="tab_container">
		<div style="display: block;" id="tab1" class="tab_content">
			<!-- START IMAGE GALLERY -->

			<h2>Image Gallery</h2>

			<ul class="imglist">

				<li><img src="/public/images/thumb1.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb1_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb2.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb2_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb3.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb3_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb4.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb4_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb5.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb5_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb6.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb6_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb7.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb7_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb8.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb8_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb7.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb7_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb5.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb5_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb6.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb6?_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb1.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb1_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb4.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb4_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

				<li><img src="/public/images/thumb3.jpg" alt="Image1"
					height="100" width="100">
					<div class="actions">
						<a class="imglistbutton" rel="facebox"
							href="http://www.jeffadams.co.uk/themeforest/realityadmin/themes/red/images/thumb3_big.jpg"><img
							src="/public/images/magnifier.png" alt="View" height="16"
							width="16"></a> <a href="#" class="imglistbutton"><img
							src="/public/images/cancel.png" alt="Delete" height="16"
							width="16"></a>
					</div></li>

			</ul>

			<!-- END IMAGE GALLERY -->
		</div>
		<div style="display: none;" id="tab2" class="tab_content">
			<h2>Forms</h2>

			<p>Forms are great for collecting informatoin or simply for use
				in your web application. With Reality Admin, you get stylish form
				elements ready to use straight out the box. They're already skinned,
				pre-sized adn formatted for you so you can simply get on and use
				them as you choose.</p>

			<form action="" method="post">
				<!-- RADIO GROUPS -->
				<p>
					<input name="radio" id="RADIO1" value="RADIO1" type="radio">
					<label for="RADIO1">RADIO ONE</label> <input name="radio"
						id="RADIO2" value="RADIO2" type="radio"> <label
						for="RADIO2">RADIO TWO</label> <input name="radio" id="RADIO3"
						value="RADIO3" type="radio"> <label for="RADIO3">RADIO
						THREE</label>
				</p>


				<p>
					<label>Small Input Box:</label><br> <input class="text small"
						type="text"> <span class="valid">This is a
						validation message</span>
				</p>



				<p>
					<label>Medium Input Box:</label><br> <input
						class="text medium" type="text"> <span class="error">This
						is an error message</span>
				</p>

				<p>
					<label>Large Input Box</label><br> <input class="text large"
						type="text">
				</p>


				<!-- CHECKBOXES -->
				<p>
					<input class="checkbox" checked="checked" id="cbdemo1"
						type="checkbox"> <label for="cbdemo1">Checkbox
						label</label> <input class="checkbox" id="cbdemo2" type="checkbox">
					<label for="cbdemo2">Checkbox label</label>

					<!-- COMBO SELECT BOX -->

					<label for="cbo">Dropdown/Combo Box:</label> <select name="cbo"
						id="cbo" class="select">

						<option selected="selected" value="One">One</option>
						<option value="Two">Two</option>
						<option value="Three">Three</option>
						<option value="Four">Four</option>
						<option value="Five">Five</option>

					</select>

				</p>

				<p>
					<label>Text Area Without Editor:</label><br>
					<textarea cols="8" rows="5"></textarea>
				</p>
				<p>
					<label>Text Area with Editor:</label><br>
				<div class="wysiwyg" style="width: 85px;">
					<ul role="menu" class="panel">
						<li><a title="Bold" class="bold" role="menuitem"
							tabindex="-1" href="javascript:;">bold</a></li>
						<li><a title="Italic" class="italic" role="menuitem"
							tabindex="-1" href="javascript:;">italic</a></li>
						<li><a title="Strike-through" class="strikeThrough"
							role="menuitem" tabindex="-1" href="javascript:;">strikeThrough</a></li>
						<li><a title="Underline" class="underline" role="menuitem"
							tabindex="-1" href="javascript:;">underline</a></li>
						<li role="separator" class="separator"></li>
						<li><a title="Justify Left" class="justifyLeft"
							role="menuitem" tabindex="-1" href="javascript:;">justifyLeft</a></li>
						<li><a title="Justify Center" class="justifyCenter"
							role="menuitem" tabindex="-1" href="javascript:;">justifyCenter</a></li>
						<li><a title="Justify Right" class="justifyRight"
							role="menuitem" tabindex="-1" href="javascript:;">justifyRight</a></li>
						<li><a title="Justify Full" class="justifyFull"
							role="menuitem" tabindex="-1" href="javascript:;">justifyFull</a></li>
						<li role="separator" class="separator"></li>
						<li><a title="Indent" class="indent" role="menuitem"
							tabindex="-1" href="javascript:;">indent</a></li>
						<li><a title="Outdent" class="outdent" role="menuitem"
							tabindex="-1" href="javascript:;">outdent</a></li>
						<li><a title="Subscript" class="subscript" role="menuitem"
							tabindex="-1" href="javascript:;">subscript</a></li>
						<li><a title="Superscript" class="superscript"
							role="menuitem" tabindex="-1" href="javascript:;">superscript</a></li>
						<li role="separator" class="separator"></li>
						<li><a title="Undo" class="undo" role="menuitem"
							tabindex="-1" href="javascript:;">undo</a></li>
						<li><a title="Redo" class="redo" role="menuitem"
							tabindex="-1" href="javascript:;">redo</a></li>
						<li role="separator" class="separator"></li>
						<li><a title="Insert Ordered List" class="insertOrderedList"
							role="menuitem" tabindex="-1" href="javascript:;">insertOrderedList</a></li>
						<li><a title="Insert Unordered List"
							class="insertUnorderedList" role="menuitem" tabindex="-1"
							href="javascript:;">insertUnorderedList</a></li>
						<li><a title="Insert Horizontal Rule"
							class="insertHorizontalRule" role="menuitem" tabindex="-1"
							href="javascript:;">insertHorizontalRule</a></li>
						<li role="separator" class="separator"></li>
						<li><a title="Create link" class="createLink" role="menuitem"
							tabindex="-1" href="javascript:;">createLink</a></li>
						<li><a title="Insert image" class="insertImage"
							role="menuitem" tabindex="-1" href="javascript:;">insertImage</a></li>
						<li role="separator" class="separator"></li>
						<li><a title="Header 1" class="h1" role="menuitem"
							tabindex="-1" href="javascript:;">h1</a></li>
						<li><a title="Header 2" class="h2" role="menuitem"
							tabindex="-1" href="javascript:;">h2</a></li>
						<li><a title="Header 3" class="h3" role="menuitem"
							tabindex="-1" href="javascript:;">h3</a></li>
						<li role="separator" class="separator"></li>
						<li><a title="Remove formatting" class="removeFormat"
							role="menuitem" tabindex="-1" href="javascript:;">removeFormat</a></li>
					</ul>
					<div style="clear: both;">
						<!-- -->
					</div>
					<iframe tabindex="0" id="IFrame"
						style="min-height: 106px; width: 85px;" src="javascript:false;"
						frameborder="0"></iframe>
				</div>
				<textarea style="display: none;" cols="8" rows="6" class="wysiwyg"></textarea>
				</p>
				<p>
					<input class="submit" value="Button" type="submit"> <input
						name="Submit2" class="submit" value="Another Button" type="submit">
					<input name="Reset2" class="submit special" value="Special Button"
						type="submit">
				</p>
			</form>
		</div>
	</div>
</div>

<div class="clearfix">&nbsp;</div>


<!-- NOTIFICATION - USES CLASS OF "WARNING" and the CANHIDE ENABLES CICK TO FADE AWAY-->
<div class="notification lightbulb canhide">

	<p>
		<strong>NOTIFICATION: </strong> This is a notification message. You
		can use this to provide site feedback or provide hints and tips. Click
		me and I go away.
	</p>

</div>



<div class="container_12">
	<h2>Accordion Widget</h2>
	<p>Somtimes it's easier to compartmentalise data or visualisations.
		In the example below we have different types of content that we have
		grouped up - making it easier for the user to choose which part they
		want to look at, and also focusing the user on what is important.</p>


	<div class="clearfix">&nbsp;</div>
	<h3 class="acc_trigger active">
		<a href="#">Something Important</a>
	</h3>
	<div style="display: block;" class="acc_container">
		<div class="block">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Vivamus dapibus sem sed libero vehicula at mattis magna semper.
				Nulla augue metus, euismod non fermentum et, auctor quis dolor.
				Mauris a nisi quam, aliquam placerat felis. Nam vestibulum facilisis
				eros, vitae tempus est feugiat commodo. Pellentesque quis mi eu arcu
				tristique ullamcorper vel ornare lorem. Sed euismod quam ac orci
				bibendum fringilla. Suspendisse dolor lectus, dapibus vitae cursus
				nec, auctor id ante. Etiam consectetur, turpis id rhoncus tincidunt,
				justo ligula fringilla enim, sed blandit tortor mi ac nisl. Praesent
				non nisi risus. Duis hendrerit elit ut turpis pretium suscipit.
				Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
				posuere cubilia Curae; Sed sed dui velit, accumsan malesuada orci.
				Suspendisse interdum turpis ut nisi dictum laoreet. In hac habitasse
				platea dictumst. Vivamus luctus dignissim quam eget adipiscing.
				Vestibulum ac mauris eros. Etiam diam metus, molestie in tincidunt
				vel, dignissim ac magna.</p>
		</div>
	</div>
	<h3 class="acc_trigger">
		<a href="#">Another Content Area</a>
	</h3>
	<div style="display: none;" class="acc_container">
		<div class="block">
			<p>Maecenas in metus magna, id faucibus nulla. Vestibulum
				pellentesque ligula vitae odio tristique tempus. Integer vehicula,
				ligula in varius tempus, lorem ante dictum sem, a venenatis diam
				tortor a enim. Aliquam erat volutpat. Integer ac ipsum metus.
				Pellentesque vulputate, quam et congue tristique, elit elit faucibus
				metus, condimentum porta velit lectus et sapien. Maecenas rutrum
				bibendum massa nec convallis. Aliquam varius imperdiet augue a
				ultricies. Donec sit amet est vitae mi porttitor iaculis. Maecenas
				scelerisque pellentesque nisl non tempor.</p>
		</div>
	</div>
	<h3 class="acc_trigger">
		<a href="#">Example of Accordion Menu Item</a>
	</h3>
	<div style="display: none;" class="acc_container">
		<div class="block">
			<p>Fusce a ligula in quam vehicula venenatis. Sed nec nunc sed
				lorem fermentum commodo a nec erat. Sed urna erat, scelerisque
				tincidunt fringilla ut, mollis quis velit. Pellentesque habitant
				morbi tristique senectus et netus et malesuada fames ac turpis
				egestas. Aliquam purus libero, cursus at euismod eget, adipiscing
				vel purus. Sed porta nibh quis dolor euismod tincidunt. Vestibulum
				tellus nisi, scelerisque at volutpat ac, eleifend ac ipsum. Maecenas
				eget est sit amet eros hendrerit aliquet. Sed vitae lacus dolor.
				Cras fermentum lacinia faucibus.</p>
		</div>
	</div>


</div>

<div class="clearfix">&nbsp;</div>
<div class="container_12">

	<!--START NOTIFICATIONS  -->
	<h2>Notifications</h2>

	<p>Reality Admin includes 5 notifications, and you can always make
		your own easily by using one of the icons provided. Click to watch
		them fade away!</p>


	<!-- INFORMATION - USES CLASS OF "IN2FORMATION" and the CANHIDE ENABLES CICK TO FADE AWAY-->
	<div class="notification information canhide">

		<p>
			<strong>INFORMATION: </strong> This is an information message. You
			can use this to give the user information about actions or their
			account etc. Click me and I go away..
		</p>
	</div>

	<!-- WARNING - USES CLASS OF "WARNING" and the CANHIDE ENABLES CICK TO FADE AWAY-->
	<div class="notification warning canhide">

		<p>
			<strong>WARNING: </strong> This is a warning message. You can use
			this to provide warning messages or confirmation to users. Click me
			and I go away.
		</p>
	</div>

	<!-- SUCCESS - USES CLASS OF "SUCCESS" and the CANHIDE ENABLES CICK TO FADE AWAY-->
	<div class="notification success canhide">

		<p>
			<strong>SUCCESS: </strong> This is a success message, used to provide
			feedback to the user that something worked. Click me and I go away
		</p>
	</div>


	<!-- FAILURE - USES CLASS OF "FAILURE" and the CANHIDE ENABLES CICK TO FADE AWAY-->
	<div class="notification failure canhide">

		<p>
			<strong>FAILURE: </strong> This is a failure message, but hey it's
			not all doom and gloom you c an click me and I'll go away and hide
			again.
		</p>
	</div>

</div>
<!--END NOTIFICATIONS  -->


<div class="clearfix">&nbsp;</div>

</div>

<div class="clearfix">&nbsp;</div>

<!-- START TABULAR DATA EXAMPLE -->
<div class="container_12">

	<h2>Table Example</h2>

	<p>Tables are a great way of displaying lots of data, and
		logically. The default styling on the tables is unobtrusive and
		enables both text and images as show in the example below.</p>

	<div class="clearfix">&nbsp;</div>

	<table border="0" cellpadding="0" cellspacing="0" width="100%">

		<tbody>
			<tr class="even">

				<th scope="col" width="5%"><input name="checkbox" id="checkbox"
					class="checkall" type="checkbox"><label for="checkbox"></label></th>

				<th scope="col" width="18%">Firstname</th>
				<th scope="col" width="16%">Lastname</th>
				<th scope="col" width="29%">E-Mail</th>
				<th scope="col" width="13%">Start Date</th>
				<th scope="col" width="11%">End Date</th>
				<th scope="col" width="8%">Status</th>
			</tr>

			<tr>

				<td scope="col"><input name="checkbox2" id="checkbox2"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">24/02/2010</td>
				<td scope="col">12/12/2011</td>
				<td scope="col"><img src="/public/images/status_offline.png"
					alt="Online"><img src="/public/images/shield.png"
					alt="Shield" height="16" width="16"></td>
			</tr>

			<tr class="even">

				<td scope="col"><input name="checkbox3" id="checkbox3"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">12/09/2009</td>
				<td scope="col">21/12/2011</td>
				<td scope="col"><img src="/public/images/status_online.png"
					alt="Online"><img src="/public/images/medal_gold_3.png"
					alt="Gold" height="16" width="16"></td>
			</tr>

			<tr>
				<td scope="col"><input name="checkbox4" id="checkbox4"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">05/09/2009</td>
				<td scope="col">12/11/2011</td>
				<td scope="col"><img src="/public/images/status_offline.png"
					alt="Offline" usemap="#O" border="0"></td>
			</tr>

			<tr class="even">

				<td scope="col"><input name="checkbox5" id="checkbox5"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">12/06/2009</td>
				<td scope="col">13/08/2011</td>
				<td scope="col"><img src="/public/images/status_online.png"
					alt="Online"><img src="/public/images/shield.png"
					alt="Shield" height="16" width="16"></td>
			</tr>

			<tr>

				<td scope="col"><input name="checkbox6" id="checkbox6"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">05/06/2009</td>
				<td scope="col">14/7/2011</td>
				<td scope="col"><img src="/public/images/status_offline.png"
					alt="Offline" usemap="#O" border="0"><img
					src="/public/images/medal_silver_1.png" alt="Silver"></td>
			</tr>



			<tr class="even">
				<td scope="col"><input name="checkbox7" id="checkbox7"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">12/09/2009</td>
				<td scope="col">21/08/2011</td>
				<td scope="col"><img src="/public/images/status_offline.png"
					alt="Offline" usemap="#O" border="0"><img
					src="/public/images/shield.png" alt="Shield"></td>
			</tr>

			<tr>
				<td scope="col"><input name="checkbox8" id="checkbox8"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">08/12/2009</td>
				<td scope="col">22/10/2011</td>
				<td scope="col"><img src="/public/images/status_online.png"
					alt="Online"><img src="/public/images/medal_gold_3.png"
					alt="Shield" height="16" width="16"></td>
			</tr>

			<tr class="even">

				<td scope="col"><input name="checkbox9" id="checkbox9"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">12/09/2009</td>
				<td scope="col">28/09/2011</td>
				<td scope="col"><img src="/public/images/status_online.png"
					alt="Online"></td>
			</tr>

			<tr>

				<td scope="col"><input name="checkbox10" id="checkbox10"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">05/04/2009</td>
				<td scope="col">21/12/2011</td>
				<td scope="col"><img src="/public/images/status_offline.png"
					alt="Offline" usemap="#O" border="0"></td>
			</tr>

			<tr class="even">
				<td scope="col"><input name="checkbox11" id="checkbox11"
					type="checkbox"></td>
				<td scope="col">Johnathan</td>
				<td scope="col">Doe</td>
				<td scope="col"><a href="#">john.doe@myinternet.com</a></td>
				<td scope="col">12/7/2009</td>
				<td scope="col">21/12/2011</td>
				<td scope="col"><img src="/public/images/status_offline.png"
					alt="Offline" usemap="#O" border="0"><img
					src="/public/images/medal_bronze_1.png" alt="Bronze"></td>
			</tr>
		</tbody>
	</table>

	<!-- END TABULAR DATA EXAMPLE -->



	<div class="grid_12">

		<div class="clearfix">&nbsp;</div>

		<ul id="pagination">

			<li class="previous-off">«Previous</li>
			<li class="active">1</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">6</a></li>
			<li><a href="#">7</a></li>
			<li><a href="#">8</a></li>
			<li><a href="#">9</a></li>
			<li><a href="#">10</a></li>
			<li class="next"><a href="#">Next »</a></li>

		</ul>

	</div>


	<div class="clearfix">&nbsp;</div>